import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Input, Button, List, Checkbox, Typography, Popconfirm, Modal, message } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import styles from './index.less';

const { Text } = Typography;

const TodoListPage: React.FC = () => {
  // 使用useModel钩子获取todoList模型中的数据和方法
  const { todos, addTodo, toggleTodo, deleteTodo, editTodo } = useModel('todoList');
  
  // 本地状态，用于管理输入框的值
  const [newTodo, setNewTodo] = useState<string>('');
  
  // 编辑相关的状态
  const [editModalVisible, setEditModalVisible] = useState<boolean>(false);
  const [editingTodo, setEditingTodo] = useState<{ id: string; content: string } | null>(null);
  const [editContent, setEditContent] = useState<string>('');

  // 处理添加新Todo的逻辑
  const handleAddTodo = () => {
    if (newTodo.trim()) {
      addTodo(newTodo.trim());
      setNewTodo(''); // 清空输入框
      message.success('添加成功！');
    } else {
      message.warning('请输入内容！');
    }
  };

  // 处理打开编辑模态框
  const handleEditModalOpen = (id: string, content: string) => {
    setEditingTodo({ id, content });
    setEditContent(content);
    setEditModalVisible(true);
  };

  // 处理保存编辑内容
  const handleSaveEdit = () => {
    if (editingTodo && editContent.trim()) {
      editTodo(editingTodo.id, editContent.trim());
      setEditModalVisible(false);
      setEditingTodo(null);
      message.success('修改成功！');
    } else {
      message.warning('内容不能为空！');
    }
  };

  return (
    <PageContainer
      header={{
        title: 'Todo List',
        ghost: true,
      }}
    >
      <div className={styles.container}>
        {/* 添加新Todo的输入区域 */}
        <div className={styles.inputArea}>
          <Input
            placeholder="请输入待办事项"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
            onPressEnter={handleAddTodo}
            style={{ width: '80%' }}
          />
          <Button type="primary" onClick={handleAddTodo} style={{ marginLeft: 8 }}>
            添加
          </Button>
        </div>

        {/* Todo列表 */}
        <List
          className={styles.todoList}
          itemLayout="horizontal"
          dataSource={todos}
          renderItem={(item) => (
            <List.Item
              actions={[
                <EditOutlined 
                  key="edit" 
                  onClick={() => handleEditModalOpen(item.id, item.content)} 
                />,
                <Popconfirm
                  key="delete"
                  title="确定要删除这个待办事项吗？"
                  onConfirm={() => deleteTodo(item.id)}
                  okText="确定"
                  cancelText="取消"
                >
                  <DeleteOutlined />
                </Popconfirm>,
              ]}
            >
              <div className={styles.todoItem}>
                <Checkbox
                  checked={item.completed}
                  onChange={() => toggleTodo(item.id)}
                />
                <Text
                  style={{
                    marginLeft: 8,
                    textDecoration: item.completed ? 'line-through' : 'none',
                  }}
                >
                  {item.content}
                </Text>
              </div>
            </List.Item>
          )}
        />

        {/* 编辑模态框 */}
        <Modal
          title="编辑待办事项"
          open={editModalVisible}
          onOk={handleSaveEdit}
          onCancel={() => setEditModalVisible(false)}
        >
          <Input
            value={editContent}
            onChange={(e) => setEditContent(e.target.value)}
            placeholder="请输入新内容"
          />
        </Modal>
      </div>
    </PageContainer>
  );
};

export default TodoListPage; 